<template>
  <div class="app-container">
    <el-card style="margin-top: 1rem;">
      <el-page-header content="竞赛消息管理" @back="goBack" />
      <el-table :data="tableData" stripe style="margin-top: 1rem">
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="adminNick" label="管理员">
          <template slot-scope="scope">
            {{ scope.row.adminNick ? scope.row.adminNick : '-- --' }}
          </template>
        </el-table-column>
        <el-table-column prop="ordNick" label="用户">
          <template slot-scope="scope">
            {{ scope.row.ordNick ? scope.row.ordNick : '-- --' }}
          </template>
        </el-table-column>
        <el-table-column prop="inDate" label="创建时间" />
        <el-table-column prop="defunct" label="状态">
          <template slot-scope="scope">
            <el-link :type="scope.row.defunct==='N'?'success':'danger'" @click="updateMailDefunct(scope.row)">
              {{ scope.row.defunct === 'N' ? 'Available' : 'Reserved' }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型">
          <template slot-scope="scope">
            <span v-if="scope.row.type===2" style="color: #ff4757">未回复</span>
            <span v-if="scope.row.type===1" style="color: #27ae60">已回复</span>
            <span v-if="scope.row.type===0" style="color: #8e44ad">公告</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-link icon="el-icon-edit" type="primary" @click="openEditMail(scope.row)">{{ scope.row.type===2?'回复':'修改' }}</el-link>
            <el-link
              icon="el-icon-delete"
              style="margin-left: 0.5rem"
              type="danger"
              @click="deleteMail(scope.row.mailId)"
            >删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-button style="margin-top: 1rem" type="primary" @click="dialogVisible = true">发布消息</el-button>
        <el-dialog
          title="发布消息"
          :visible.sync="dialogVisible"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          :show-close="false"
        >
          <el-form ref="form" :model="form" :rules="rules">
            <el-form-item label="标题" prop="title">
              <el-input v-model="form.title" maxlength="20" show-word-limit />
            </el-form-item>
            <el-form-item label="内容" prop="content">
              <el-input
                v-model="form.content"
                type="textarea"
                :autosize="{ minRows: 7, maxRows: 7}"
                placeholder="请输入通知的内容"
                maxlength="400"
                show-word-limit
              />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="adminAddMail">确 定</el-button>
          </div>
        </el-dialog>
      </el-row>
      <el-row>
        <el-dialog
          title="发布消息"
          :visible.sync="dialogVisibleEdit"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          :show-close="false"
          destroy-on-close
        >
          <el-form ref="editForm" :model="editForm" :rules="rules">
            <el-form-item v-if="type===0" label="标题" prop="title">
              <el-input v-model="editForm.title" maxlength="20" show-word-limit />
            </el-form-item>
            <el-form-item v-if="type===0" label="内容" prop="content">
              <el-input
                v-model="editForm.content"
                type="textarea"
                :autosize="{ minRows: 7, maxRows: 7}"
                placeholder="请输入通知的内容"
                maxlength="400"
                show-word-limit
              />
            </el-form-item>
            <el-form-item v-if="type>0" label="回复" prop="answer">
              <el-input
                v-model="editForm.answer"
                type="textarea"
                :autosize="{ minRows: 7, maxRows: 7}"
                placeholder="请输入回复的内容"
                maxlength="400"
                show-word-limit
              />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisibleEdit = false">取消</el-button>
            <el-button type="primary" @click="editMail">确 定</el-button>
          </div>
        </el-dialog>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getUserId } from '@/utils/auth'
import { adminAddMail, adminMailList, deleteMail, editMail, openEditMail, updateMailDefunct } from '@/api/mail'

export default {

  data() {
    return {
      type: 0,
      mailId: '',
      contestId: '',
      dialogVisible: false,
      dialogVisibleEdit: false,
      tableData: [{ mailId: '', ordNick: '', adminNick: '', defunct: 'N', type: 0 }],
      form: {
        title: '',
        content: ''
      },
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        content: [{ required: true, message: '请输入公告内容', trigger: 'blur' }],
        answer: [{ required: true, message: '请输入回复内容', trigger: 'blur' }]
      },
      editForm: {
        title: '',
        content: '',
        answer: ''
      }
    }
  },
  created() {
    if (this.$route.query.contestId === undefined) {
      this.$message.warning('请通过竞赛列表进入')
      this.$router.back()
    } else {
      this.contestId = this.$route.query.contestId
      this.adminMailList()
    }
  },
  methods: {
    openEditMail(row) {
      this.type = row.type
      this.mailId = row.mailId
      openEditMail({ mailId: this.mailId }).then(res => {
        this.editForm.answer = res.data.answer
        this.editForm.title = res.data.title
        this.editForm.content = res.data.content
        this.dialogVisibleEdit = true
      })
    },
    editMail() {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          const formData = new FormData()
          formData.set('mailId', this.mailId)
          formData.set('userId', getUserId())
          formData.set('type', this.type)
          if (this.type > 0) {
            formData.set('answer', this.editForm.answer)
          } else {
            formData.set('title', this.editForm.title)
            formData.set('content', this.editForm.content)
          }
          editMail(formData).then(res => {
            this.$message.success(res.message)
            this.dialogVisibleEdit = false
            this.adminMailList()
          })
        }
      })
    },
    adminAddMail() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const formData = new FormData()
          formData.set('contestId', this.contestId)
          formData.set('adminUserId', getUserId())
          formData.set('title', this.form.title)
          formData.set('content', this.form.content)
          adminAddMail(formData).then(res => {
            this.$message.success(res.message)
            this.adminMailList()
            this.dialogVisible = false
            this.form.content = ''
            this.form.title = ''
          })
        }
      })
    },
    adminMailList() {
      adminMailList({ contestId: this.contestId }).then(res => {
        this.tableData = res.data
      })
    },
    updateMailDefunct(row) {
      updateMailDefunct({ mailId: row.mailId, defunct: row.defunct }).then(res => {
        if (res.data) {
          row.defunct = row.defunct === 'N' ? 'Y' : 'N'
          this.$message.success(res.message)
        }
      })
    },
    deleteMail(mailId) {
      this.$confirm('此操作将永久删除竞赛消息数据，是否继续删除？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        deleteMail({ mailId: mailId }).then((res) => {
          if (res.data) {
            this.$message.success(res.message)
            this.adminMailList()
          }
        })
      })
    },
    goBack() {
      this.$router.back()
    }
  }

}
</script>

<style scoped>

</style>
